<template>
	<nav-header title="我要参加">
		<view class="p-4">
			<text class="text-xl text-black-33 font-bold block mb-4">基本信息</text>
			<u-form labelPosition="top" :model="userInfo" :rules="rules" ref="uForm" labelWidth="120">
        <u-form-item label="用户姓名" prop="realName" borderBottom required>
          <u-input v-model="userInfo.realName" border="none" placeholder="请输入联系人姓名" maxlength="10" :clearable="true"></u-input>
        </u-form-item>
        <u-form-item label="性别" borderBottom @click="actionSheetObj.show = true;">
          <text :style="{color: userInfo.sex? '#323233':'#c0c4cc'}" v-text="userInfo.sex || '请选择性别'"></text>
          <text slot="right" class="text-blue-500">选择</text>
        </u-form-item>
        <u-form-item label="联系电话" borderBottom required>
          <u-input v-model="userInfo.phone" type="number" border="none" placeholder="请输入联系电话" maxlength="11" :clearable="true"></u-input>
        </u-form-item>

        <u-form-item label="职位" prop="posts" borderBottom >
          <u-input v-model="userInfo.posts" border="none" placeholder="请输入职位" maxlength="20" :clearable="true"></u-input>
        </u-form-item>
        <u-form-item label="所属单位" prop="firm" borderBottom required>
          <u-input v-model="userInfo.firm" border="none" placeholder="请输入公司名称" maxlength="30" :clearable="true"></u-input>
        </u-form-item>
			</u-form>
		</view>
		<view class="bg-theme w-full py-4 flex items-center justify-around fixed bottom-0 z-50 text-white" @click="submit">我要报名</view>
		<u-action-sheet :actions="actionSheetObj.dataList" title="请选择性别" :show="actionSheetObj.show" @select="(item)=>{userInfo.sex = item.name}" :closeOnClickOverlay="true"
			@close="actionSheetObj.show = false"></u-action-sheet>
		<u-toast ref="uToast"></u-toast>
	</nav-header>
</template>

<script>
	import MyUpload from '@/components/my_upload.vue'
	import NavHeader from '@/components/nav_header.vue'
	import * as systemApi from '@/interface/common/system.js'
	import * as activityApi from "@/interface/junchuang/activity.js"
  import * as authUserApi from '@/interface/auth/authUserApi.js'
	export default {
		components: {
			NavHeader,MyUpload
		},
		data() {
			return {
				actionSheetObj: {
					show: false,
					dataList: []
				},
        userInfo: {
          activityId: '',
          phone: '',
          tel: '',
          gender: '0',
          birthday: '',
          nickName: '',
          realName: '',
          userName: '',
          avatarUrl: '',
          firm: '',
          email: '',
          posts: '',
          businessType: '',
          businessId: '',
          businessTime: '',
          businessName: '',
          businessRemark: '',
        },
				rules: {
          realName: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
          phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								console.log(uni.$u)
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						}
					]
				},
			}
		},
		onLoad(e) {
      const v = this
			this.userInfo.activityId = e.businessId
      v.businessId = e.businessId
      v.businessType = e.businessType
      v.businessName = e.businessName

      v.initData()
		},
		onShow() {
      this.$util.openShare();
			const v = this
			systemApi.getDictList('mmg_sex').then(({ data }) => {
				v.actionSheetObj.dataList = data.map((item) => ({ name: item.dictLabel, value: item.dictLabel }))
			})
		},
		methods: {
      initData () {
        authUserApi.getUserInfo().then(res=>{
          if (res.success) {
            for (let key in res.data) {
              let val = res.data[key]
              if (this.$util.isBlank(val)) res.data[key] = ''
            }
            Object.assign(this.userInfo, res.data)
            this.userInfo.businessId = this.businessId
            this.userInfo.businessType = this.businessType
            this.userInfo.businessName = this.businessName
          }
        })
      },
			submit() {
				const v = this
				v.$refs.uForm.validate().then(res => {
					v.$util.showLoading('保存中..')
					activityApi.saveActivityJoin(v.userInfo).then(res=>{
						v.$util.hideLoading()
						if (res.success) {
              authUserApi.updateUserInfo(v.userInfo).then(res=>{
                v.$store.dispatch('updateUserInfo', {
                  status: '1',
                  type: 'user',
                  userName: v.userInfo.nickName,
                })
                if (res.success) {
                  v.$refs.uToast.show({
                    message: '报名成功.实际报名情况，以服务人员通知为准!.',
                    complete() {
                      uni.navigateBack()
                    }
                  })
                }

              }).finally(()=>{
                v.$util.hideLoading()
              })
						}
					})
				}).catch(errors => {
					uni.$u.toast('请填写必填项')
				})
			},
		}
	}
</script>

<style>

</style>
